<template>
  <div>
    <jxf-titletip :title="title" @refreshPage="refreshPage"></jxf-titletip>
    <el-card class="mt20">
      <div slot="header">
        <span><i class="el-icon-search"></i> 筛选查询</span>
      </div>
      <div>
        <el-form :inline="true" :model="searchInfo" ref="searchForm" class="demo-form-inline">
          <el-form-item label="账号:" prop="telphone">
            <el-input v-model="searchInfo.telphone"></el-input>
          </el-form-item>
          <el-form-item label="姓名:" prop="userName">
            <el-input v-model="searchInfo.userName"></el-input>
          </el-form-item>
          <el-form-item label="所属部门:" prop="departmentId">
            <el-select v-model="searchInfo.departmentId" clearable placeholder="请选择">
              <el-option
                v-for="item in rolesInfo"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="resetForm('searchForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="jxf-table-card mt20">
      <div slot="header">
        <span><i class="el-icon-rank"></i> 数据列表</span>
        <el-button style="float: right;  padding: 5px 10px" type="primary" @click="showAddMember = true">新增
        </el-button>
      </div>
      <jxf-table :table="tableInfo">
        <template slot="status" slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            @change="changeStatus(scope.row)">
          </el-switch>
        </template>
        <template slot="operation" slot-scope="scope">
          <el-button @click="changeMember(scope.row)" type="text" size="small">分配部门</el-button>
          <el-button @click="editMember(scope.row)" type="text" size="small">编辑</el-button>
        </template>
      </jxf-table>
    </el-card>
    <jxf-pagination class="mt20" :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                    @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
    <AddMember :showAddMember.sync="showAddMember" @refreshList="getList"></AddMember>
    <EditMember :showEditMember.sync="showEditMember" :memberInfo="memberInfo" @refreshList="getList"></EditMember>
    <ChangeMemberDepartment :showChangeMember.sync="showChangeMember" :memberInfo ="memberInfo" :rolesInfo="rolesInfo"
                            @refreshList="getList"></ChangeMemberDepartment>
  </div>
</template>

<script>

  import formatDate from '@/assets/js/formatDate'
  import AddMember from './components/AddMember'
  import EditMember from './components/EditMember'
  import ChangeMemberDepartment from './components/ChangeMemberDepartment'

  export default {
    name: "MemberManagement",
    components: {AddMember, EditMember, ChangeMemberDepartment},
    data() {
      return {
        title: "成员管理",
        // 所有部门获取
        rolesInfo: [],
        searchInfoBack: {
          telphone: "",
          userName: "",
          departmentId: ""
        },
        searchInfo: {...this.searchInfoBack},
        tableInfo: {},
        pageTotal: 0,
        pageSize: 10,
        currentPage: 1,
        showAddMember: false,
        showEditMember: false,
        showChangeMember: false,
        memberInfo: {}
      }
    },
    methods: {
      // 表单初始化
      init() {
        this.tableInfo = {
          border: true,
          loading: true,
          tr: [
            {
              id: '1',
              label: '成员账号',
              width: '120',
              prop: 'telphone'
            },
            {
              id: '2',
              label: '成员姓名',
              prop: 'userName'
            },
            {
              id: '3',
              label: '邮箱地址',
              minWidth: '140',
              prop: 'mailbox'
            },
            {
              id: '4',
              label: '所属部门',
              prop: 'departmentName'
            },
            {
              id: '5',
              label: '添加时间',
              width: '160',
              prop: 'createTime'
            },
            {
              id: '6',
              label: '最后登录',
              width: '160',
              prop: 'loginTime'
            },
            {
              id: '7',
              label: '是否启用',
              show: 'template',
              prop: 'status'
            },
            {
              id: '8',
              label: '操作',
              prop: 'operation',
              show: 'template',
              width: "160",
              fixed: "right"
            }
          ],
          data: []
        }
      },
      getAllDepartmentList() {
        ajax.get(apis.auth.getAllDepartmentList)
          .then(res => {
            if (res.success === true && res.data !== null) {
              this.rolesInfo = res.data.map(item => {
                return {
                  id: item.id,
                  name: item.name
                }
              })
            }
          })
      },
      getList() {
        let info = {...this.searchInfo, pageNum: this.currentPage, pageSize: this.pageSize}
        ajax.post(apis.auth.getMemberList, info)
          .then(res => {
            if (res.success === true) {
              this.pageTotal = res.data.total
              if (res.data.dataList !== [] && res.data.dataList !== null) {
                this.tableInfo.data = this.formatData(res.data.dataList)
              } else {
                this.tableInfo.data = []
              }
              this.tableInfo.loading = false
            }
          })
      },
      onSearch() {
        this.currentPage = 1
        this.getList()
      },
      currentPageChange(pageNo) {
        this.currentPage = pageNo
        this.getList()
      },
      pageSizeChange(pageNo) {
        this.pageSize = pageNo
        this.getList()
      },
      formatData(list) {
        return list.map(item => {
            return {
              id: item.id,
              telphone: item.telphone,
              userName: item.userName,
              mailbox: item.mailbox,
              departmentName: item.departmentName,
              departmentId: item.departmentId,
              createTime: item.createTime !== undefined && item.createTime !== null ? formatDate.timeFormat(item.createTime) : "",
              loginTime: item.loginTime !== undefined && item.loginTime !== null ? formatDate.timeFormat(item.loginTime) : "",
              status: item.status === 1 ? true : false
            }
          }
        )
      },
      // 禁用、启用
      changeStatus(row) {
        let text = row.status === true ? '确定启用？' : '确定禁用？'
        this.$confirm(text, '提示', {
          type: 'warning'
        }).then(() => {
          ajax.post(apis.auth.updateMember, {id: row.id, status: row.status ? 1 : 0,telphone:row.telphone})
            .then(res => {
              if (res.success === true) {
                this.$message({
                  message: res.message,
                  type: 'success'
                });
              } else {
                row.status = !row.status
                this.$message({
                  message: res.message,
                  type: 'error'
                });
              }
            })
        }).catch(() => {
          row.status = !row.status
        })
      },
      // 编辑
      editMember(row) {
        this.showEditMember = true
        this.memberInfo = {
          id: row.id,
          telphone: row.telphone,
          userName: row.userName,
          mailbox: row.mailbox
        }
      },
      // 分配部门
      changeMember(row) {
        this.showChangeMember = true
        this.memberInfo= {
          id:row.id,
          gId:row.departmentId
        }
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      refreshPage() {
        this.searchInfo = {...this.searchInfoBack}
        this.currentPage = 1
        this.pageSize = 10
        this.getList()
      }
    },
    created() {
      this.init()
      // 获取部门列表
      this.getAllDepartmentList()
      this.getList()
    }
  }
</script>

<style lang="scss" scoped>

</style>
